import React, { createRef, useState } from 'react'
import ReactDom from 'react-dom'

import TodoHeader from './components/TodoHeader/index'
import TodoItem from './components/TodoItem/index'

class App extends React.Component {
  constructor () {
    super()
    this.state = {
      todoList: [
        {
          id: '1',
          title: '吃饭',
          isCompleted: false
        },
        {
          id: '2',
          title: '睡觉',
          isCompleted: false
        }
      ]
    }
    this.inputRef = createRef()
  }
  render () {
    return (
      <div>
        <TodoHeader>任务列表</TodoHeader>
        <input ref={this.inputRef} type="text" />
        {
          this.state.todoList.map(item => {
            return <TodoItem key={item.id} item={item} />
          })
        }
      </div>
    )
  }
}

ReactDom.render(
  <App/>,
  document.querySelector('#root')
)

